<template>
	<el-descriptions border :column="settingStore.device === 'mobile' ? 1 : 2">
		<el-descriptions-item>
			<template #label>
				<span>{{ $t('机构名称') }}</span>
				<span v-if="isEditState" class="custom-validator-symbol">*</span>
			</template>
			<el-input ref="nameRef" v-if="isEditState" v-model="orgForm.name" v-elInputCheck="{ message: $t('请输入机构名称') }" />
			<span v-else>{{ currInfo.name }}</span>

		</el-descriptions-item>
		<el-descriptions-item v-if="!isAdd" :label="$t('唯一标识')" span="2">
			<span>{{ currInfo.id }}</span>
		</el-descriptions-item>
		<el-descriptions-item v-if="!isAdd" :label="$t('自定义ID')">
			<span>{{ currInfo.customId }}</span>
		</el-descriptions-item>
		<el-descriptions-item v-if="!isAdd" :label="$t('租户唯一标识')" span="2">
			<span>{{ currInfo.tenantId }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('英文名称')">
			<el-input v-if="isEditState" v-model="orgForm.enName" />
			<span v-else>{{ currInfo.enName }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('机构类型')">
			<el-select v-if="isEditState" v-model="orgForm.organizationType" :placeholder="$t('请选择')" :size="fontSizeObj.buttonSize"  >
				<el-option v-for="(item, index) in $dictionary().organizationType"
				:style="{ fontSize: fontSizeObj.baseFontSize }" :key="index" :label="item.name" :value="item.id" />
			</el-select>
			<span v-else>{{ currInfo.organizationType }}</span>
		</el-descriptions-item>
		<el-descriptions-item :label="$t('机构代码')">
			<el-input v-if="isEditState" v-model="orgForm.organizationCode" />
			<span v-else>{{ currInfo.organizationCode }}</span>
		</el-descriptions-item>
		<!-- 	<el-descriptions-item label="机构法人">
			<el-input v-if="isEditState" v-model="orgForm.principalName" />
			<span>{{ currInfo.principalName }}</span>
		</el-descriptions-item>
		<el-descriptions-item label="证件类型">
			<el-select v-if="isEditState" v-model="orgForm.principalIDType" placeholder="请选择">
				<el-option v-for="(item,index) in $dictionary().principalIDType" :key="index" :label="item.name" :value="item.id" />
			</el-select>
			<span>{{ currInfo.principalIDType }}</span>
		</el-descriptions-item>
		<el-descriptions-item label="证件号">
			<el-input v-if="isEditState" v-model="orgForm.principalIDNum" />
			<span>{{ currInfo.principalIDNum }}</span>
		</el-descriptions-item> -->
		<el-descriptions-item :label="$t('机构描述')" span="3">
			<el-input type="textarea" :rows="3" v-if="isEditState" v-model="orgForm.description" />
			<span v-else>{{ currInfo.description }}</span>
		</el-descriptions-item>
	</el-descriptions>
</template>

<script lang="ts" setup>
import { $keyNameAssign, } from '@/utils/object'
import { $dictionary, $dictionaryFunc } from '@/utils/data'
import { getOrgTypeList, listByType } from '@/api/dictionary/index';
import { useSettingStore } from "@/store/modules/settingStore"
import { inject, ref, watch } from 'vue';
const settingStore = useSettingStore()
// 注入 字体对象
const fontSizeObj: any = inject('sizeObjInfo');

const props = defineProps({
	isAdd: {//是否为添加模式，添加模式有些字段不需要显示
		type: Boolean,
		default: false,
	},
	isEditState: {//是否为编辑状态
		type: Boolean
	},
	currInfo: {//当前信息
		type: Object,
		default: () => { return {} }
	}
})

const data = reactive({
	orgForm: {//新增或编辑部门表单
		id: "",
		name: "",//机构名称
		enName: "",//英文名称
		organizationType: "",//机构类型
		organizationCode: "",//机构代码
		description: "",//机构描述
		tabIndex: null, // 排序
		// principalName:'',
		// principalIDType:'',
		// principalIDNum:''
	},
	nameRef: "",

})

let {
	orgForm,
	nameRef,
} = toRefs(data);

watch(
	() => props.isEditState,

	(newVal) => {

		if (newVal) {//编辑状态给表单赋值
			$keyNameAssign(orgForm.value, props.currInfo);
		}
	},
	{
		immediate: true,
	}
)

onMounted(async () => {

	await $dictionaryFunc('organizationType', getOrgTypeList)//请求机构类型

})

//接收弹窗配置
function onDialogConfig(config) {
	dialogConfig.value = config;
}

defineExpose({
	orgForm,
	validForm,
})

async function validForm() {
	if (!orgForm.value.name) {
		nameRef.value.focus();
		setTimeout(() => {
			nameRef.value.blur()
		}, 0)

		return false;
	}
	return true;
}

</script>

<style lang="scss" scoped>
	:deep(.el-select){
		width:100%;
	}
</style>